import { StyleSheet, Text, View, Image } from 'react-native'
import React, { Component } from 'react'

type Props = {
  info: UserInfo
}
// 14-1memo与性能优化函数式组件和class组件拦截多余渲染
export default class InfoView_shouldUpdate_classCom extends Component<Props> {
  constructor(props: Props) {
    super(props)
  }

  // ! class使用这个即可
  shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
    return JSON.stringify(nextProps.info) !== JSON.stringify(this.props.info)
  }

  render() {
    const { info } = this.props
    console.log('class com render ...')
    return (
      <View style={darkStyles.content}>
        <Image
          style={darkStyles.img}
          source={{ uri: info.avatar || undefined }}
        />
        <Text style={darkStyles.txt}>{info.name}</Text>
        <View style={darkStyles.infoLayout}>
          <Text style={darkStyles.infoTxt}>{info.desc}</Text>
        </View>
      </View>
    )
  }
}

const darkStyles = StyleSheet.create({
  content: {
    width: '100%',
    height: 350,
    backgroundColor: '#353535',
    flexDirection: 'column',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingTop: 20
  },
  img: {
    width: 96,
    height: 96,
    borderRadius: 48,
    borderWidth: 4,
    borderColor: '#ffffffE0'
  },
  txt: {
    fontSize: 24,
    color: 'white',
    fontWeight: 'bold',
    marginTop: 32
  },
  infoLayout: {
    width: '90%',
    padding: 16,
    backgroundColor: '#808080',
    borderRadius: 12,
    marginTop: 24
  },
  infoTxt: {
    fontSize: 16,
    color: 'white'
  },
})
